<template>

	<view class="content">
		<view class="status_bar">
			<!-- 这里是状态栏 -->
		</view>
		<uni-nav-bar left-icon="left" :fixed="true" :border="false" style="z-index: 99999;">
			<up-tabs :list="tabs.list" lineWidth="35" :itemStyle="tabs.itemStyle" :lineColor="tabs.lineColor"
				@change="changeTab"></up-tabs>
		</uni-nav-bar>


		<view class="form">
			<view class="list">
				<div class="amount">
					<up-row>
						<up-col span="12">
							<div @click="openKeyBoard" style="height: 100rpx;margin-top: 35rpx;">
								<up-text mode="price" size="50rpx" :color="tabs.lineColor" fonts
									:text="form.amount"></up-text>
							</div>
						</up-col>

					</up-row>
					<up-line :color="tabs.lineColor"></up-line>
				</div>

				<div class="item">
					<up-row>
						<up-col span="1.2">
							<up-icon size="50rpx" name="/static/imgs/icons/class.png"></up-icon>
						</up-col>
						<up-col span="1.8">
							<up-text color="#9b9b9b" text="分类"></up-text>
						</up-col>

						<up-col span="7">
							<div @click="classClick"> {{formatClassName(form.classnames)}} </div>
						</up-col>
					</up-row>
					<up-line></up-line>
				</div>

				<div class="item">
					<up-row>
						<up-col span="1.2">
							<up-icon size="50rpx" name="/static/imgs/icons/time.png"></up-icon>
						</up-col>
						<up-col span="1.8">
							<up-text color="#9b9b9b" text="时间"></up-text>
						</up-col>

						<up-col span="7">
							<div @click="dateClick">
								{{ vk.pubfn.timeFormat(new Date(form.datetime),"yyyy-MM-dd hh:mm:ss") }}</div>
						</up-col>
					</up-row>
					<up-line></up-line>
				</div>

				<div class="item">
					<up-row>
						<up-col span="1.2">
							<up-icon size="50rpx" name="/static/imgs/icons/remark.png"></up-icon>
						</up-col>
						<up-col span="1.8">
							<up-text color="#9b9b9b" text="备注"></up-text>
						</up-col>

						<up-col span="7">
							<up-input v-model="form.remark" :maxlength="500" border="none"></up-input>
						</up-col>
					</up-row>
					<up-line></up-line>
				</div>

				<div class="item" style="margin-top: 35rpx;">


					<up-row>
						<up-col span="1.2">
							<up-icon size="50rpx" name="photo"></up-icon>
						</up-col>
						<up-col span="1.8">
							<up-text color="#9b9b9b" text="图片"></up-text>
						</up-col>

						<up-col span="7">
							<up-upload :fileList="form.imgs" @afterRead="afterRead" @delete="deletePic" name="1"
								multiple :maxCount="10" :previewFullImage="true"></up-upload>
						</up-col>
					</up-row>


				</div>

				<div class="buttons" v-if="buttons.show">
					<up-row>
						<up-col span="6">
							<up-button type="primary" @click="submit" style="width: 300rpx;" text="提交"></up-button>
						</up-col>
						<up-col span="6">
							<up-button type="primary" @click="makeOne" style="width: 300rpx;margin-left: 40rpx;"
								text="再记一笔" color="#cccccc"></up-button>
						</up-col>
					</up-row>
				</div>



			</view>
		</view>


		<up-picker :show="tps.show" ref="uPickerRef" :columns="tps.columns.ones" keyName="name" @change="changePicker"
			@confirm="confirmPicker" @cancel="tps.show=false"></up-picker>

		<up-datetime-picker :show="date.show" v-model="form.datetime" mode="datetime" @cancel="date.show=false"
			@confirm="date.show=false"> </up-datetime-picker>

		<jia-PayKeyboard :overlayClose="true" ref="keyWord" v-model="form.amount" @input="inputPayKeyboard"
			@confirm="confirmPayKeyboard" @hide="hidePayKeyboard" :max="10000000"></jia-PayKeyboard>

	</view>
</template>

<script>
	let _self;
	import {
		getTypeList
	} from '../../static/js/config'
	import {
		formatShowClassName
	} from '../../static/js/funx';
	import {
		getUserTypeSelectList
	} from '../../static/js/user';
	import {
		addJournal
	} from '../../static/api/book.js';
	export default {
		mounted() {
			this.openKeyBoard();
		},
		data() {
			return {
				buttons: {
					show: false
				},
				tabs: {
					list: getTypeList(),
					current: 0,
					currentItem: 0,
					itemStyle: {
						width: "60px",
						height: "44px",
					},
					lineColor: ""
				},
				tps: {
					show: false,
					columns: {
						ones: [

						],
						twos: [

						]
					}
				},
				date: {
					show: false,
				},
				keyboard: {
					show: true,
				},
				form: {
					amount: '0',
					typid: '',
					datetime: Date.now(),
					classids: '',
					classnames: '',
					remark: '',
					imgs: []
				}
			}
		},
		onLoad() {
			_self = this
			_self.tabsStyle()

		},
		methods: {
			changeTab(item) {
				_self.tabs.current = item.index
				_self.openKeyBoard()
				_self.tabsStyle()
			},
			tabsStyle() {
				_self.tabs.lineColor = _self.tabs.list[_self.tabs.current].lineColor
				_self.tabs.currentItem = _self.tabs.list[_self.tabs.current]
				_self.form.typid = _self.tabs.currentItem.id
				_self.initSelect()

			},
			formatClassName(name) {
				return formatShowClassName(name)
			},
			// 初始化选择框
			initSelect() {
				const sls = getUserTypeSelectList(_self.tabs.currentItem)
				_self.tps.columns.ones = [
					sls[0],
					sls[1].length > 0 ? sls[1][0] : [],
				]


				_self.tps.columns.twos = sls[1]
				_self.form.classids = "#" + sls[0][0].id + "#" + sls[1][0][0].id + "#"
				_self.form.classnames = "#" + sls[0][0].name + "#" + sls[1][0][0].name + "#"
			},
			closeKeyBoard() {
				this.$refs.keyWord.close();
				this.buttons.show = true
			},
			openKeyBoard() {
				this.$refs.keyWord.open();
				this.buttons.show = false
			},
			classClick() {
				_self.tps.show = true
			},
			dateClick() {
				_self.date.show = true

			},
			empty() {
				_self.form.amount = '0'
				_self.form.remark = ''
				_self.form.imgs = []
			},
			// 选择改变事件
			changePicker(e) {
				const {
					columnIndex,
					value,
					values, // values为当前变化列的数组内容
					index
				} = e

				// 当第一列值发生变化时，变化第二列(后一列)对应的选项
				if (columnIndex === 0) {
					// picker为选择器this实例，变化第二列对应的选项
					this.$refs.uPickerRef.setColumnValues(1, this.tps.columns.twos[index])
				}

			},
			// 选择确定事件
			confirmPicker(e) {
				const {
					value
				} = e

				let names = "#"
				let ids = "#"
				value.forEach((item, index) => {
					ids += +item.id + "#"
					names += item.name + "#"
				})
				_self.form.classids = ids
				_self.form.classnames = names
				_self.tps.show = false

			},
			inputPayKeyboard(e) {
				console.log(e)
			},
			confirmPayKeyboard(e) {
				console.log(e)
				_self.closeKeyBoard()
			},
			hidePayKeyboard() {},
			submit() {
				addJournal(_self.form).then(res => {
					if (res) {
						_self.empty()
					}
				})
			},
			makeOne() {
				_self.empty()
				_self.openKeyBoard()
			},
			uploadFilePromise(filepath) {
				return new Promise((resolve, reject) => {
					vk.uploadFile({
						title: "上传中...",
						filePath: filepath,
						success: (res) => {
							// 上传成功
							setTimeout(() => {
								resolve(res.url)
							}, 1000)

						},
						fail: (err) => {
							// 上传失败

						}
					});
				})
			},
			// 新增图片
			async afterRead(event) {
				// 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				let fileListLen = this.form.imgs.length
				lists.map((item) => {
					this.form.imgs.push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
				for (let i = 0; i < lists.length; i++) {

					console.log(lists[i])

					const result = await this.uploadFilePromise(lists[i].url)
					let item = this.form.imgs[fileListLen]
					this.form.imgs.splice(fileListLen, 1, Object.assign(item, {
						status: 'success',
						message: '',
						url: result
					}))
					fileListLen++
				}
			},
		},

	}
</script>

<style>
	@import "@/static/css/add.css";
</style>